import React, { Component } from 'react'
//引入action
import {createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction} from '../../redux/actions/count'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux' 
 class CountUI extends Component {
    //state={count:0}

    increment=() => {
      const {value} = this.selectNumber
      this.props.increment(value*1)
    
    }
    decrement=() => {
      const {value} = this.selectNumber
      this.props.decrement(value*1)
    }
    //奇数加
    incrementIfOdd=() => {
      const {value} = this.selectNumber
      const count = this.props.count
      if(count%2!==0){
        this.props.increment(value*1)
      }
    }
    //异步加
    incrementAsync=() => {
      const {value} = this.selectNumber
      this.props.incrementAsync(value*1,500)
    }
  render() {
    console.log('UI组件接收到的props:',this.props)
    
    return (
      <div>
         <h1>当前求和为：{this.props.count}</h1>
        <select ref={(c)=>{this.selectNumber = c}}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
        <h3>下方组件人员总数为：{this.props.personCount}</h3>
      </div>
    )
  }
}


//映射状态 箭头函数返回对象时，使用()进行包裹

//使用connect()()创建并暴露一个容器组件
export default connect(state=>({count:state.sum,personCount:state.personInfo.length}),
    //mapDispatchToProps的简写
        {
            increment:createIncrementAction,
            decrement:createDecrementAction,
            incrementAsync:createIncrementAsyncAction
    })(CountUI)
